<template>
  <div class="focus-controller-layout">
    <div class="focus-content">
      <slot></slot>
    </div>
    <div v-el:focus-mask-layer class="focus-mask">
    </div>
  </div>
</template>

<script type="text/babel">
  import $ from 'jquery'
  import KeyEvent from '../../libs/KeyEvent'
  import KeyEventComponentMixin from '../KeyEventComponentMixin'
  export default {
    mixins: [ KeyEventComponentMixin ],
    data () {
      return {
        currentFocusElements: []
      }
    },
    methods: {
      isFocusing: function (component) {
        var current = this.currentFocusElements
        if (current.length) {
          var i = current.length
          while (i--) {
            var item = current[i]
            if (item.component === component) {
              return item
            }
          }
        }
        return false
      },
      findFocusingComponent: function (el) {
        var current = this.currentFocusElements
        if (current.length) {
          var i = current.length
          while (i--) {
            var item = current[i]
            if (item.el === el) {
              return item.component
            }
          }
        }
        return null
      },
      onKeyDown: function (event) {
        if (event.keyCode === KeyEvent.KEYCODE_DPAD_OK) {
          var current = this.currentFocusElements
          var i = current.length
          while (i--) {
            var item = current[i]
            item.component.performClick()
          }
        }
      }
    },
    events: {
      'on-view-focus': function (component) {
        var self = this
        if (self.isFocusing(component)) {
          return
        }
        var el = component.focusableElement()
        var offset = $(el).offset()
        var mask = component.createMaskElement()
        if (mask) {
          var m = $(mask)
          m.css('position', 'absolute')
          .css('top', offset.top + 'px')
          .css('left', offset.left + 'px')
          .appendTo($(this.$els.focusMaskLayer))

          component.onFocusView(mask)

          this.currentFocusElements.push({
            component: component,
            el: mask
          })
        }
      },
      'on-view-blur': function (component) {
        var self = this
        var tag = -1
        var i = self.currentFocusElements.length
        while (i--) {
          var item = self.currentFocusElements[i]
          if (item.component === component) {
            item.component.onBlurView(item.el, function () {
              $(item.el).remove()
              item.el = undefined
              item.component = undefined
              delete item.el
              delete item.component
            })
            tag = i
            break
          }
        }
        if (tag > -1) {
          self.currentFocusElements.splice(tag, 1)
        }
      }
    }
  }
</script>

<style scoped>
  .focus-controller-layout {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }

  .focus-content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }

  .focus-mask {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
</style>